<template>
  <div class="mine">
    <div class="userTop">
      <img src="../../../static/market/info.jpg" alt="">
      <div class="userInfo">
        <div class="userName">用户名</div>
        <div class="booksNum">共买入0本书，卖出0本书</div>
      </div>
    </div>
    <div class="orderList">
      <div>买书订单</div>
      <ul>
        <li @click="goOrderList('1')">
          <div>
            <i-badge count="0" overflow-count="100">
              <img mode="aspectFit" class="listIcon" src="../../../static/mine/daifukuan.png" alt="">
            </i-badge>
          </div>
          <div>待付款</div>
        </li>
        <li @click="goOrderList('2')">
          <div>
            <i-badge count="2" overflow-count="100">
              <img mode="aspectFit" class="listIcon" src="../../../static/mine/daifahuo.png" alt="">
            </i-badge>
          </div>
          <div>待发货</div>
        </li>
        <li @click="goOrderList('3')">
          <div>
            <i-badge count="2" overflow-count="100">
              <img mode="aspectFit" class="listIcon" src="../../../static/mine/daishouhuo.png" alt="">
            </i-badge>
          </div>
          <div>待收货</div>
        </li>
        <li @click="goOrderList('4')">
          <div>
            <i-badge count="99" overflow-count="100">
              <img mode="aspectFit" class="listIcon" src="../../../static/mine/daipingjia.png" alt="">
            </i-badge>
          </div>
          <div>待评价</div>
        </li>
      </ul>
    </div>
    <div class="group">
      <i-cell title="我的企鹅蛋" is-link url='/pages/myqb/main'>
        <img slot="icon" class="qed" src="../../../static/market/dou.png" alt="">
      </i-cell>
    </div>
    <div class="group">
      <i-cell-group>
        <!-- <i-cell title="我想要的" is-link url='/pages/iwant/main'>
          <i-icon type="collection_fill" slot="icon" size="28" color="#c78550" />
        </i-cell>
        <i-cell title="我买到的" is-link url='/pages/ibought/main'>
          <i-icon type="activity_fill" slot="icon" size="28" color="#c78550" />
        </i-cell> -->
        <i-cell title="卖出订单" is-link url='/pages/isold/main'>
          <i-icon type="createtask_fill" slot="icon" size="28" color="#c78550" />
        </i-cell>
        <i-cell title="书籍审核反馈" is-link url='/pages/feedback/main'>
          <i-icon type="remind_fill" slot="icon" size="28" color="#c78550" />
          <i-badge count="66" i-class-alone="alone" />
        </i-cell>
        <i-cell title="买书红包" is-link url='/pages/redPackets/main'>
          <i-icon type="redpacket_fill" slot="icon" size="28" color="#c78550" />
        </i-cell>
      </i-cell-group>
    </div>
    <div class="group">
      <i-cell-group>
        <i-cell title="联系客服" @click="show">
          <i-icon type="customerservice_fill" slot="icon" size="28" color="#c78550" />
        </i-cell>
      </i-cell-group>
    </div>
    <i-modal :visible="visible" :show-cancel="false" :show-ok="false">
      <div style="color: #000;font-size:16px;">请添加客服微信</div>
      <span style="color: #c78650;font-size:14px;">LBB570546715</span>
      <div class="makesure" @click="makesure">确定</div>
    </i-modal>
    <tabBarr current="mine" />
  </div>
</template>
<script>
import tabBarr from '../../components/tabBar/tabBar'
export default {
  components: {
    tabBarr
  },
  data() {
    return {
      visible: false,
      current: 'mine'
    }
  },
  onShow() {
    this.$http.get('/customer/wx/mine').then(res => {
      console.log(res)
    })
  },
  methods: {
    goOrderList(index) {
      wx.navigateTo({
        url: '../bookOrderList/main?index=' + index
      })
    },
    show() {
      this.visible = true
    },
    makesure() {
      this.visible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.makesure {
    margin: 40rpx auto 0;
    padding: 10rpx;
    width: 80rpx;
    height: 40rpx;
    line-height: 40rpx;
    font-size: 32rpx;
    color: #fff;
    background-color: #c78550;
    border-radius: 10rpx;
}
.mine {
    height: 100vh;
    box-sizing: border-box;
    padding-bottom: 120rpx;
    background-color: #eee;
    .i-cell-ft {
        color: #c78550;
    }
    .group {
        margin-top: 18rpx;
        .qed {
            padding: 3px 5px;
            width: 18px;
            height: 22px;
        }
        ._i-badge {
            position: absolute;
            top: 28rpx;
            right: 90rpx;
        }
    }
    .userTop {
        padding: 30rpx 18rpx;
        display: flex;
        background-color: #fff;
        img {
            width: 126rpx;
            height: 126rpx;
            border-radius: 50%;
        }
        .userInfo {
            margin-left: 20rpx;
            .userName {
                height: 70rpx;
                line-height: 70rpx;
                font-size: 16px;
                font-weight: 900;
            }
            .booksNum {
                font-size: 14px;
                color: #999;
            }
        }
    }
    .orderList {
        margin-top: 18rpx;
        padding: 18rpx 34rpx 0;
        background-color: #fff;
        & > div {
            line-height: 40rpx;
            font-size: 16px;
            font-weight: 900;
        }
        ul {
            padding-top: 20rpx;
            display: flex;
            text-align: center;
            li {
                padding: 20rpx 0;
                width: 25%;
                font-size: 14px;
                img {
                    width: 50rpx;
                    height: 60rpx;
                }
                div {
                    color: #999;
                }
            }
        }
    }
}
</style>

